<template>
  <el-dialog :visible.sync="dialogVisible" title="向研究员提问" width="30%" style="min-width: 400px;" @open="onDialogOpen">
    <div style="display: flex; flex-direction: column; justify-content: left; align-items: left;">
      <div style="text-align: left;">请输入你的问题：</div>
      <el-input type="textarea" v-model="questionContent" :rows="4" placeholder="请输入问题内容(至少10个字)"></el-input>
      <div style="display: flex; align-items: center; margin-top: 10px;">
        <div style="margin-right: 10px;">向</div>
        <el-select v-model="selectedResearcher" placeholder="请选择研究员">
          <el-option v-for="researcher in researchers" :key="researcher.id" :label="researcher.username" :value="researcher.id"></el-option>
        </el-select>
        <div style="margin-left: 10px;">提问</div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: 10px;">
      <el-button @click="emits('askQuestion-canceled')">取消</el-button>
      <el-button type="primary" @click="onSubmit" :disabled="questionContent.length <= 10 || !selectedResearcher">提交</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { getResearchers } from '../utils/apiUser'
import { createQuestion } from '../utils/apiQuestion'
import { ElMessage } from 'element-plus';

const dialogVisible = ref(false);
const selectedResearcher = ref(null);
const researchers = ref([]);
const questionContent = ref('')

const onDialogOpen = () => {
  selectedResearcher.value = null
  questionContent.value = ''
  getResearchers().then(res => {
    researchers.value = res.data
  })
}

const onSubmit = () => {
  createQuestion(questionContent.value, selectedResearcher.value).then(res=>{
    ElMessage.success('提问成功！')
    emits('askQuestion-success')
  }).catch(error => {
    ElMessage.error('提问失败')
  })
}

const emits = defineEmits(['askQuestion-canceled', 'askQuestion-success'])

</script>
